<template>
	<view class="booking-bar-container">
		<!-- 折扣标签 -->
		<view class="discount-badge">
			<text class="discount-text">即享4.5折</text>
		</view>
		
		<view class="booking-bar">
			<!-- 左侧咨询区域 -->
			<view class="consult-section" @tap="onContactHost">
				<view class="avatar-container">
					<image class="avatar" src="https://i.ibb.co/TMmxh5LD/image.png" mode="aspectFill"></image>
					<!-- Hi 气泡 -->
					<view class="hi-bubble">
						<text class="hi-text">Hi~</text>
					</view>
				</view>
				<text class="consult-label">咨询房东</text>
			</view>
			
			<!-- 中间日期区域 -->
			<view class="date-section" @tap="showDatePicker">
				<view class="date-item">
					<text class="date-prefix">住</text>
					<text class="date-value">{{ formatDateDisplay(checkInDate) || '09-25' }}</text>
				</view>
				<view class="date-item">
					<text class="date-prefix">离</text>
					<text class="date-value">{{ formatDateDisplay(checkOutDate) || '09-30' }}</text>
					<image class="calendar-icon" src="" mode="aspectFit"></image>
				</view>
				</view>

			<!-- 右侧预订按钮 -->
			<view class="booking-section">
				<view class="booking-button" @tap="onBookNow">
					<view class="booking-content">
						<text class="booking-title">会员预订</text>
						<view class="price-row">
							<text class="current-price">¥{{ memberPrice || '129' }}/晚</text>
							<text class="original-price">¥{{ originalPrice || '288' }}</text>
						</view>
								</view>
							</view>
						</view>
					</view>
		
		<!-- 隐藏的日期选择器 -->
		<uni-datetime-picker 
			ref="datePicker" 
			type="daterange" 
			:start="startDate" 
			:end="endDate"
			:value="datePickerValue" 
			@change="onDateChange"
			@maskClick="onMaskClick"
			:clear-icon="false" 
			:border="false"
			:hide-second="true"
			range-separator="至"
			placeholder="选择入住和退房日期"
			class="hidden-picker"
		/>
		
		<!-- 测试用的可见日期选择器，用于调试 -->
		<view style="margin: 20rpx; border: 1rpx solid #f0f0f0; border-radius: 8rpx; padding: 20rpx; background: #fff;">
			<text style="font-size: 28rpx; color: #999; margin-bottom: 10rpx; display: block;">调试用日期选择器</text>
			<uni-datetime-picker 
				ref="testPicker" 
				type="daterange" 
				:start="startDate" 
				:end="endDate"
				:value="[]" 
				@change="onDateChange"
				placeholder="点击选择入住和退房日期"
				:clear-icon="false" 
				:border="true"
				range-separator=" 至 "
			/>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'houseBookBar',
		props: {
			checkInDate: {
				type: String,
				default: ''
			},
			checkOutDate: {
				type: String,
				default: ''
			},
			price: {
				type: [Number, String],
			default: '288'
		},
		memberPrice: {
			type: [Number, String],
			default: '129'
		},
		originalPrice: {
			type: [Number, String],
			default: '288'
			}
		},
	data() {
		return {
			startDate: '2025-01-01',
			endDate: '2026-12-31'
		}
	},
		computed: {
			datePickerValue() {
				const startDate = this.formatFullDate(this.checkInDate);
				const endDate = this.formatFullDate(this.checkOutDate);
				
				console.log('计算datePickerValue:', { startDate, endDate, checkInDate: this.checkInDate, checkOutDate: this.checkOutDate });
				
				if (startDate && endDate) {
					return [startDate, endDate];
				}
				// 返回空数组而不是null，避免组件初始化问题
				return [];
			}
		},
		methods: {
			onBookNow() {
				this.$emit('book-now');
			},
		
			onContactHost() {
				this.$emit('contact-host');
			},
		
			showDatePicker() {
				console.log('点击日期选择器，尝试打开日历');
				
				// 首先尝试调试用的日期选择器
				if (this.$refs.testPicker) {
					console.log('使用测试日期选择器');
					try {
						if (typeof this.$refs.testPicker.open === 'function') {
							this.$refs.testPicker.open();
							return;
						} else if (typeof this.$refs.testPicker.show === 'function') {
							this.$refs.testPicker.show();
							return;
						} else if (this.$refs.testPicker.$refs && this.$refs.testPicker.$refs.popup) {
							if (typeof this.$refs.testPicker.$refs.popup.open === 'function') {
								this.$refs.testPicker.$refs.popup.open();
								return;
							}
						}
					} catch (error) {
						console.error('测试日期选择器打开失败:', error);
					}
				}
				
				// 然后尝试隐藏的日期选择器
				if (this.$refs.datePicker) {
					console.log('找到 datePicker 引用，尝试打开');
					try {
						if (typeof this.$refs.datePicker.open === 'function') {
							this.$refs.datePicker.open();
							return;
						} else if (typeof this.$refs.datePicker.show === 'function') {
							this.$refs.datePicker.show();
							return;
						} else if (this.$refs.datePicker.$refs && this.$refs.datePicker.$refs.popup) {
							if (typeof this.$refs.datePicker.$refs.popup.open === 'function') {
								this.$refs.datePicker.$refs.popup.open();
								return;
							}
						}
					} catch (error) {
						console.error('日历打开失败:', error);
					}
				}
				
				// 备选方案
				console.log('使用原生日期选择器作为备选方案');
				this.showSystemDatePicker();
		},
		
			showNativeDatePicker() {
				const today = new Date();
				const dates = [];
				const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
				
				for (let i = 0; i < 6; i++) {
					const date = new Date(today);
					date.setDate(today.getDate() + i);
					const month = date.getMonth() + 1;
					const day = date.getDate();
					const weekday = weekdays[date.getDay()];
					const dateText = i === 0 ? `今天 ${month}月${day}日 ${weekday}` : 
									i === 1 ? `明天 ${month}月${day}日 ${weekday}` :
									`${month}月${day}日 ${weekday}`;
					dates.push(dateText);
				}
				
				uni.showActionSheet({
					title: '请选择入住日期',
					itemList: dates,
					success: (res) => {
						const selectedIndex = res.tapIndex;
						const selectedDate = new Date(today);
						selectedDate.setDate(today.getDate() + selectedIndex);
						
						const checkInDate = this.formatDateToString(selectedDate);
						this.selectCheckOutDate(checkInDate, selectedIndex);
					}
				});
			},
			
			selectCheckOutDate(checkInDate, checkInIndex) {
				const today = new Date();
				const dates = [];
				const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
				
				for (let i = checkInIndex + 1; i < checkInIndex + 6; i++) {
					const date = new Date(today);
					date.setDate(today.getDate() + i);
					const month = date.getMonth() + 1;
					const day = date.getDate();
					const weekday = weekdays[date.getDay()];
					const nights = i - checkInIndex;
					dates.push(`${month}月${day}日 ${weekday} (${nights}晚)`);
				}
				
				uni.showActionSheet({
					title: '请选择退房日期',
					itemList: dates,
					success: (res) => {
						const selectedIndex = res.tapIndex;
						const selectedDate = new Date(today);
						selectedDate.setDate(today.getDate() + checkInIndex + 1 + selectedIndex);
						
						const checkOutDate = this.formatDateToString(selectedDate);
						
						this.$emit('date-change', {
							startDate: checkInDate,
							endDate: checkOutDate,
							rawDates: [checkInDate, checkOutDate]
						});
					}
				});
			},
			
			formatDateToString(date) {
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				return `${year}-${month}-${day}`;
			},
		
		onDateChange(e) {
			console.log('日期选择器值改变:', e);
			if (e && Array.isArray(e) && e.length === 2) {
				const [startDate, endDate] = e;
				const start = new Date(startDate);
				const end = new Date(endDate);
				
				const startFormatted = `${start.getFullYear()}-${String(start.getMonth() + 1).padStart(2, '0')}-${String(start.getDate()).padStart(2, '0')}`;
				const endFormatted = `${end.getFullYear()}-${String(end.getMonth() + 1).padStart(2, '0')}-${String(end.getDate()).padStart(2, '0')}`;
				
				this.$emit('date-change', {
					startDate: startFormatted,
					endDate: endFormatted,
					rawDates: e
				});
				
				uni.showToast({
					title: `已选择 ${this.formatDateDisplay(startFormatted)} - ${this.formatDateDisplay(endFormatted)}`,
					icon: 'success',
					duration: 2000
				});
			}
		},
		
		onMaskClick() {
			console.log('日期选择器遮罩被点击');
		},
		
			formatFullDate(dateString) {
				if (!dateString) return '';
				
				if (dateString.match(/^\d{4}-\d{2}-\d{2}$/)) {
					return dateString;
				}
				
				const currentYear = new Date().getFullYear();
				const [month, day] = dateString.split('-');
				return `${currentYear}-${month}-${day}`;
			},
		
		formatDateDisplay(dateString) {
				if (!dateString) return '';
				
				const date = new Date(this.formatFullDate(dateString));
				if (isNaN(date.getTime())) return '';
				
			const month = String(date.getMonth() + 1).padStart(2, '0');
			const day = String(date.getDate()).padStart(2, '0');
				
			return `${month}-${day}`;
			}
		}
	}
</script>

<style lang="scss" scoped>
.booking-bar-container {
		position: fixed;
	bottom: -300rpx;
		left: 0;
	right: 0;
	z-index: 1000;
}

/* 折扣标签 */
.discount-badge {
	position: absolute;
	top: -40rpx;
	right: 32rpx;
	background: linear-gradient(135deg, #8B4513, #A0522D);
	border-radius: 16rpx 16rpx 0 0;
	padding: 8rpx 20rpx;
	z-index: 1001;
}

.discount-text {
	font-size: 22rpx;
	color: #ffffff;
	font-weight: 600;
}

/* 主容器 */
.booking-bar {
	background: #ffffff;
	box-shadow: 0 -4rpx 24rpx rgba(0, 0, 0, 0.1);
	padding: 24rpx 32rpx;
	padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
		display: flex;
		align-items: center;
	gap: 32rpx;
	}

/* 左侧咨询区域 */
.consult-section {
	display: flex;
		flex-direction: column;
		align-items: center;
		cursor: pointer;
	min-width: 120rpx;
}

.avatar-container {
	position: relative;
	margin-bottom: 12rpx;
}

.avatar {
	width: 60rpx;
	height: 60rpx;
	border-radius: 50%;
	border: 3rpx solid #f0f0f0;
}

.hi-bubble {
	position: absolute;
	top: -12rpx;
	right: -16rpx;
	background: #ff4757;
	border-radius: 20rpx;
	padding: 4rpx 12rpx;
	transform: rotate(-15deg);
}

.hi-bubble::after {
	content: '';
	position: absolute;
	bottom: -8rpx;
	left: 20rpx;
	width: 0;
	height: 0;
	border-left: 8rpx solid transparent;
	border-right: 8rpx solid transparent;
	border-top: 8rpx solid #ff4757;
	transform: rotate(15deg);
}

.hi-text {
	font-size: 20rpx;
	color: #ffffff;
	font-weight: 600;
	line-height: 1;
}

.consult-label {
					font-size: 24rpx;
	color: #333333;
					font-weight: 500;
	line-height: 1;
}

/* 中间日期区域 */
.date-section {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 16rpx;
	cursor: pointer;
	padding: 16rpx;
			border-radius: 12rpx;
	transition: background-color 0.2s ease;
			
			&:active {
		background-color: #f8f9fa;
	}
}

.date-item {
				display: flex;
				align-items: center;
	gap: 12rpx;
}

.date-prefix {
	font-size: 28rpx;
	color: #333333;
	font-weight: 600;
	line-height: 1;
					}
					
					.date-value {
	font-size: 28rpx;
	color: #333333;
	font-weight: 700;
	line-height: 1;
}

.calendar-icon {
	width: 32rpx;
	height: 32rpx;
	margin-left: auto;
}

/* 右侧预订按钮 */
.booking-section {
					display: flex;
					align-items: center;
}

.booking-button {
	background: linear-gradient(135deg, #ff9500, #ff6b00);
	border-radius: 28rpx;
	padding: 24rpx 40rpx;
	min-width: 200rpx;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: 0 8rpx 24rpx rgba(255, 107, 0, 0.3);
	
	&:active {
		transform: scale(0.95);
		box-shadow: 0 12rpx 32rpx rgba(255, 107, 0, 0.4);
	}
}

.booking-content {
			display: flex;
	flex-direction: column;
			align-items: center;
	gap: 8rpx;
}

.booking-title {
	font-size: 28rpx;
				color: #ffffff;
				font-weight: 700;
	line-height: 1;
}

.price-row {
	display: flex;
	align-items: baseline;
	gap: 16rpx;
}

.current-price {
	font-size: 32rpx;
	color: #ffffff;
	font-weight: 800;
	line-height: 1;
}

.original-price {
	font-size: 24rpx;
	color: rgba(255, 255, 255, 0.8);
	font-weight: 500;
	text-decoration: line-through;
	line-height: 1;
}

/* 隐藏的日期选择器 */
	.hidden-picker {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
		z-index: 1000;
		pointer-events: auto;
	}

/* 当需要显示时覆盖隐藏样式 */
.hidden-picker :deep(.uni-datetime-picker) {
	pointer-events: auto !important;
}

.hidden-picker :deep(.uni-popup) {
	pointer-events: auto !important;
	z-index: 1001 !important;
}

/* 日期选择器样式覆盖 */
:deep(.uni-datetime-picker) {
	/* 确保弹窗容器正常显示 */
	.uni-datetime-picker-container {
		border-radius: 32rpx 32rpx 0 0 !important;
		box-shadow: 0 -8rpx 40rpx rgba(0, 0, 0, 0.15) !important;
		background: #ffffff !important;
		max-height: 80vh !important;
	}

	/* 遮罩层 */
	.uni-datetime-picker-mask {
		background: rgba(0, 0, 0, 0.5) !important;
		z-index: 999 !important;
	}

	/* 弹窗主体 */
	.uni-datetime-picker-popup {
		z-index: 1000 !important;
		background: #ffffff !important;
	}

	/* 基本样式，不过度干扰组件内部渲染 */
	.uni-calendar {
		background: #ffffff !important;
	}

	.uni-calendar-header {
		background: #ffffff !important;
	}

	.uni-calendar-content {
		background: #ffffff !important;
	}

	/* 选中状态 */
	.uni-calendar-item--checked {
		background-color: #ff6b00 !important;
		color: #ffffff !important;
	}

	.uni-calendar-item--checked-range-text {
		color: #ff6b00 !important;
	}

	.uni-calendar-item--checked-range {
		background-color: rgba(255, 107, 0, 0.1) !important;
	}

	/* 今天 */
	.uni-calendar-item--today {
		color: #ff6b00 !important;
		font-weight: bold !important;
	}

	/* 不可用日期 */
	.uni-calendar-item--disabled {
		color: #cccccc !important;
	}

	/* 按钮区域 */
	.uni-datetime-picker-btn-group {
		background: #ffffff !important;
		border-top: 1rpx solid #f0f0f0 !important;
		padding: 20rpx !important;
	}

	.uni-datetime-picker-btn--ok {
		background-color: #ff6b00 !important;
		color: #fff !important;
		border-radius: 8rpx !important;
	}

	.uni-datetime-picker-btn--cancel {
		background-color: #f5f5f5 !important;
		color: #666666 !important;
		border-radius: 8rpx !important;
	}
}

/* 全局确保日期选择器不被遮挡 */
:deep(.uni-popup) {
	z-index: 1000 !important;
}

:deep(.uni-popup__wrapper) {
	z-index: 1001 !important;
}

/* 响应式适配 */
@media screen and (max-width: 750rpx) {
	.booking-bar {
		padding: 20rpx 24rpx;
		gap: 24rpx;
	}
	
	.discount-badge {
		right: 24rpx;
		padding: 6rpx 16rpx;
	}
	
	.discount-text {
		font-size: 20rpx;
	}
	
	.consult-section {
		min-width: 100rpx;
	}
	
	.avatar {
		width: 52rpx;
		height: 52rpx;
	}
	
	.hi-text {
		font-size: 18rpx;
	}
	
	.consult-label {
		font-size: 22rpx;
	}
	
	.date-prefix,
	.date-value {
		font-size: 26rpx;
	}
	
	.calendar-icon {
		width: 28rpx;
		height: 28rpx;
	}
	
	.booking-button {
		padding: 20rpx 32rpx;
		min-width: 180rpx;
		border-radius: 24rpx;
	}
	
	.booking-title {
		font-size: 26rpx;
	}
	
	.current-price {
		font-size: 28rpx;
	}
	
	.original-price {
		font-size: 22rpx;
	}
}

@media screen and (max-width: 650rpx) {
	.booking-bar {
		padding: 16rpx 20rpx;
		gap: 20rpx;
	}
	
	.discount-badge {
		right: 20rpx;
		padding: 4rpx 12rpx;
	}
	
	.discount-text {
		font-size: 18rpx;
	}
	
	.consult-section {
		min-width: 80rpx;
	}
	
	.avatar {
		width: 48rpx;
		height: 48rpx;
	}
	
	.consult-label {
		font-size: 20rpx;
	}
	
	.date-section {
		padding: 12rpx;
		gap: 12rpx;
	}
	
	.date-prefix,
	.date-value {
		font-size: 24rpx;
	}
	
	.calendar-icon {
		width: 24rpx;
		height: 24rpx;
	}
	
	.booking-button {
		padding: 18rpx 28rpx;
		min-width: 160rpx;
		border-radius: 20rpx;
	}
	
	.booking-title {
		font-size: 24rpx;
	}
	
	.current-price {
		font-size: 26rpx;
	}
	
	.original-price {
		font-size: 20rpx;
		}
	}
</style>